<tab [lists] = "subLists" [activeTab]="activeTabIndex" [tabClicked]="tabClicked" [change]="mustChange" (tabToggle)="tabToggle($event)"></tab>
<div class="segment-container" #f10Content (scroll)="scrollEvent($event, f10Content, el1, el2, el3)">
  <div class="segment sub-title-0" #el1>
    <p class="segment-title"><span class="little-cube"></span>{{subLists[0].label}}</p>
    <div class="seg-body">
      <div class="SHnumAndPrice">
        <draw-chart [data]="SHNumAndPrice | async"></draw-chart>
      </div>
      <table-scroll [header]="shareholderNumHeader" [data]="shareholderNum | async"></table-scroll>
    </div>
  </div>
  <div class="segment sub-title-1" #el2>
    <p class="segment-title"><span class="little-cube"></span>{{subLists[1].label}}</p>
    <div class="seg-body">
      <div class="compare-time">
        <div class="time-left">
          <table-tab [lists]="top10ShareholderTab | async" (tableToggle)="top10ShareHolderChartToggle($event)"></table-tab>
        </div>
        <div class="time-right">
          <table-tab [lists]="top10FloatShareholderTab | async" (tableToggle)="top10FloatShareHolderChartToggle($event)"></table-tab>
        </div>
      </div>
      <shareholder-compare [leftData]="top10ShareholderChart | async" [rightData]="top10FloatShareholderChart | async"></shareholder-compare>
      <p class="stock-statistics">前十大股东累计持有：{{(top10ShareholderCount | async)?.amount}}万股，累计占总股本比：{{(top10ShareholderCount | async)?.ratio}}</p>
      <table-tab [lists]="top10ShareholderTab | async" (tableToggle)="top10ShareHolderToggle($event)"></table-tab>
      <table-simple [data]="top10Shareholder | async" [header]="top10ShareholderHeader"></table-simple>
    </div>
  </div>
  <div class="segment sub-title-2" #el3>
    <p class="segment-title"><span class="little-cube"></span>{{subLists[2].label}}</p>
    <div class="seg-body">
      <p class="stock-statistics">前十大流通股东累计持有：{{(top10FloatShareholderCount | async)?.amount}}万股，累计占总股本比：{{(top10FloatShareholderCount | async)?.ratio}}</p>
      <table-tab [lists]="top10FloatShareholderTab | async" (tableToggle)="top10FloatShareHolderToggle($event)"></table-tab>
      <table-simple [data]="top10FloatShareholder | async" [header]="top10ShareholderHeader"></table-simple>
    </div>
  </div>
  <!--<div class="segment sub-title-3">
    <p class="segment-title"><span class="little-cube"></span>{{subLists[3].label}}</p>
    <div class="seg-body">
    </div>
  </div>-->
  <!--<disclaimer></disclaimer>-->
</div>